<%@ page import="java.util.List" %>
<%@ page import="com.lagou.entity.Student" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生信息管理系统</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet"/>
    <script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
    .pagination_div {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div>
    <div class="table-responsive">
        <%-- 绘制一个10行7列的表格用于展示所有学生信息，最开始没有学生信息的时候表格数据全部为空即可，让表格填充整个页面--%>
        <table class="table">
            <%-- 提供相应功能的按钮， 其中增加和修改操作共用一个模态框，其他操作通过JS来处理  --%>
            <caption>
                <button class="btn btn-info" id="student_back">返回主页面</button>
                <button class="btn btn-info" id="student_page">显示学生信息</button>
                <button class="btn btn-info" id="student_add" data-toggle="modal" data-target="#myModal">增加学生信息</button>
                <button class="btn btn-info" id="student_delete">删除学生信息</button>
                <button class="btn btn-info" id="student_modify" data-toggle="modal" data-target="#myModal">修改学生信息</button>
                <button class="btn btn-info" id="student_find">查询学生信息</button>
                <label for="s_code"></label><input type="text" id="s_code" placeholder="按学号查询" style="...">
            </caption>


            <%-- 绘制1行7列的表头信息           --%>
            <thead>
            <tr>
                <th>选择</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>邮箱</th>
                <th>备注</th>
                <th>班级编号</th>
            </tr>
            </thead>

            <tbody id="tbody"></tbody>
            <%--    绘制10行 7列的假数据内容添加到表格中占位置      --%>
            <%--   获取内置对象中放入的所有学生信息，在这里进行显示     --%>
            <%
                // 获取所有学员信息到集合中
                List<Student> studentList = (List<Student>) session.getAttribute("studentList");
                //获取所有学员信息的数量
                Integer maxLen = (Integer) session.getAttribute("maxLen");
                if(null == maxLen) maxLen=0;

                //处理集合为空的情况
                if(studentList != null && studentList.size()>0){
                    for(int i=0; i<(Math.min(studentList.size(), 10)); i++){
            %>
            <tr>
                <td><label>
                    <input type="checkbox" value="<%= studentList.get(i).getId() %>" />
                </label></td>
                <td><%=studentList.get(i).getId()%></td>
                <td><%=studentList.get(i).getName()%></td>
                <td><%=studentList.get(i).getGender()%></td>
                <td><%=studentList.get(i).getBirthday()%></td>
                <td><%=studentList.get(i).getEmail()%></td>
                <td><%=studentList.get(i).getComment()%></td>
                <td><%=studentList.get(i).getClass_id()%></td>
            </tr>
            <%
                    }
                }
            %>
        </table>

        <%-- 管理学生信息的模态框（Modal）  --%>
        <div class="modal" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" aria-hidden="true">
                            <span>X</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabelAdd">
                            学生信息
                        </h4>
                    </div>
                    <form action="studentAddServlet" method="post">
                        <input type="hidden" name="flag" id="flag"/>
                        <div class="modal-body" id="modal-body">
                            <label for="name">姓名:</label>
                            <input type="text" class="form-control" id="m_name" name="name" placeholder="请输入姓名">
                            <label for="name">性别:</label>
                            <input type="text" class="form-control" id="m_gender" name="gender" placeholder="请输入性别">
                            <label for="name">出生日期:</label>
                            <input type="text" class="form-control" id="m_birthday" name="birthday" placeholder="请输入生日日期">
                            <label for="name">邮箱:</label>
                            <input type="text" class="form-control" id="m_email" name="email" placeholder="请输入邮箱">
                            <label for="name">备注:</label>
                            <input type="text" class="form-control" id="m_comment" name="comment" placeholder="请输入备注">
                            <label for="name">班级编号:</label>
                            <input type="text" class="form-control" id="m_class_id" name="class_id" placeholder="请输入班级编号">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">保存</button>
                            <button type="reset" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="pagination_div">
        <ul class="pagination">
            <%
                //声明一个局部变量i负责实现当前页和上一页、下一页的控制
                int i = 1;
                //声明一个局部变量j负责循环所有页码
                int j = 1 ;
            %>
            <li><a href="${pageContext.request.contextPath}/studentPageQueryServlet?page=<%=i>1?i-1:i%>">上一页</a></li>
            <%
                //循环显示所有页码
                if(null!=maxLen){
                    for(j=1; j<=maxLen; j++){

            %>
            <li><a href="studentPageQueryServlet?page=<%=j%>" id=<%=j%>> <%=j%></a></li>

            <%
                    }
                }
            %>
            <li><a href="${pageContext.request.contextPath}/studentPageQueryServlet?page=<%=i<maxLen?i+1:i%>">下一页</a></li>
            <li><a href="#">总共<%=maxLen%>页</a></li>
        </ul>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    // 获取模块路径信息

    let moduePathName1 = window.document.location.pathname;

    // 获取模块名称
    let moduleName1 = moduePathName1.substring(0, moduePathName1.substr(1).indexOf('/')+1);

    //返回主页面
    $("#student_back").on('click', function () {
        window.location.href = moduleName1 + "/mainPage.jsp";
    });

    //显示学生信息
    $("#student_page").on("click", function () {
        window.location.href = moduleName1 + "/studentPageQueryServlet";
    });

    //增加学生信息
    $("#student_add").on("click", function () {
        $("#flag").val("add");
    });

    //修改学生信息
    $("#student_modify").on("click", function (flag) {
        let checkboxs = $("input[type='checkbox']:checked");
        //处理未勾选的情况
        if(checkboxs.length == 0){
            alert("请选择一个学生!");
            return false;
        } else if(checkboxs.length>1){
            alert("只能选择一个学生！");
            return false;
        } else {
            $("#flag").val(checkboxs[0].value);
        }
    });

    //删除学生信息
    $("#student_delete").on("click", function () {
        // 获取勾选的复选框
        let checkboxs = $("input[type='checkbox']:checked");
        let idsString = "";
        for(let i=0; i<checkboxs.length; i++){
            idsString += "id="+checkboxs[i].value;
            if(i !== checkboxs.length-1){
                idsString += "&";
            }
        }
        //处理未勾选的情况
        if(checkboxs.length==0){
            alert("请选择一个学生");
        } else {
            window.location.href = moduleName1 + "/studentDeleteServlet?"+ idsString;
        }
    });

    // 查找学生信息
    $("#student_find").on("click", function () {
        let codeLike = $(this).siblings("#s_code").val();
        if(0 == codeLike.length){
            alert("必须输入学号!");
            return false;
        } else if(/^\d{0,4}$/g.test(codeLike)) {
            window.location.href = moduleName1 + "/studentQueryServlet?id=" + codeLike;
        } else {
            alert("学号必须是数字");
        }

    });


</script>